
<template>
  <div style="width: 100%; height: 100%;display: flex;flex-direction: column;">
    <el-row style="height: 50px;">
      <el-col :span="19" style="text-align: center;">
        <el-input v-model="addressValue"  placeholder="点击下方地图即可获取地址" />
      </el-col>
      <el-col :span="5">
        <el-button type="primary" @click="comfirm" >确 定</el-button>
      </el-col>
    </el-row>
    <el-row style="height: 100%;">
      <el-col :span="19">
        <div ref="mapContainer" id="mapContainer" style="width: 100%; height:100%;"></div>
      </el-col>
      <el-col :span="5">
        <el-input type="text" v-model="searchKeyword" @input="onSearch" placeholder="请输入位置关键字" />
        <el-row>
          <el-col :span="24" v-for="item in poiResult" :key="item.id" style="line-height: 30px;padding-left: 12px;box-sizing: border-box;cursor: pointer;">
            <span @click="addressClick(item)">{{item.name}}</span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import {onMounted, onUnmounted, ref,getCurrentInstance} from "vue";
const searchKeyword = ref('');
let placeSearch = null;
let map = null;
let marker = null;
const poiResult =ref([]);
let lat = null;
let lng = null;
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "e6139075347e0445f0152739e1471e04",
  };
  AMapLoader.load({
    key: "497908f6f1f704807b28b9a6c18bda3b", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale","AMap.PlaceSearch","AMap.Geocoder"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
    .then((AMap) => {
      map = new AMap.Map("mapContainer", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 12, // 初始化地图级别
        center: [108.692870, 30.932880], // 初始化地图中心点位置
      });
      placeSearch = new AMap.PlaceSearch({
        pageSize: 15, //单页显示结果条数
        pageIndex: 1, //页码
        map: map, //展现结果的地图实例
      });
      map.on("click", (e) => {
        console.log(e.lnglat);
        lat = e.lnglat.lat;
        lng = e.lnglat.lng;
        console.log(lat,lng);
        new AMap.Geocoder().getAddress(e.lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // 获取地理位置信息
            addressValue.value = result.regeocode.formattedAddress
            // 可以将地址显示在页面上或其他操作
          }
        });
        if (marker) {
          map.remove(marker);
        }
        marker = new AMap.Marker({
          position: new AMap.LngLat(event.lnglat.lng, event.lnglat.lat),
          icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
          anchor: 'bottom-center',
        });
        // const markerList = [marker1, marker2, marker3];
        map.add(marker);
      })
    })
    .catch((e) => {
      console.log(e);
    });
});
onUnmounted(() => {
  map?.destroy();
});

function onSearch() {
  if (searchKeyword.value) {
    placeSearch.search(searchKeyword.value, function (status, result) {
      console.log(status);
      console.log(result.poiList.pois);
      poiResult.value = result.poiList.pois;
    });
  }
}

const {proxy} = getCurrentInstance();

function addressClick(item) {
  console.log(item.name);
  console.log(item.location.lat);
  console.log(item.location.lng);
  proxy.$emit("setAddress",item.name);
  proxy.$emit("setPosition", [item.location.lat,item.location.lng]);
  // proxy.$emit("closeMapaddressDialog", false);
}
function comfirm() {
  if(addressValue.value == ''){
    return;
  }
  proxy.$emit("setAddress", addressValue.value);
  proxy.$emit("setPosition", [lat,lng]);
  // proxy.$emit("closeMapaddressDialog", false);
}

const addressValue = ref('');

</script>
<style scoped lang="scss">

</style>
